<template>


    <div>
        <div class="goods-item" v-for="order in OrderList" :key="order.id">
            <div style="display: flex">
                <img :src="order.goodsPicture" class="order-picture">
                <div style="width:80%">
                    <div class="van-ellipsis">{{order.description}}</div>
                    <div class="order-price">￥{{order.price}}</div>
                    <div>卖家 ：{{order.sellerName}}</div>
                    <div>商品数量：{{order.goodsNum}}</div>
                    <div>订单编号：{{order.id}}</div>
                </div>
            </div>
            <van-steps :active="order.active">
                <van-step>买家下单</van-step>
                <van-step>交易中</van-step>
                <van-step>交易完成</van-step>
            </van-steps>
            <button v-on:click="ConfirmReceipt(order)" class="Confirm-Receipt-Button">确认收货</button>
        </div>
    </div>


</template>

<script>
    import Vue from 'vue';
    import {List} from 'vant';
    import {Step, Steps} from 'vant';
    import {ApiService} from "../../axios/apiService";

    Vue.use(List);
    Vue.use(Step);
    Vue.use(Steps);

    const getMyOrder = new ApiService("/getMyOrder")
    const confirm = new ApiService("/confirmReceipt")
    export default {
        name: "OrderSpeed",
        data() {
            return {
                active: 1,
                OrderList: [
                   /* {
                        active: 1,
                        picture: "https://img14.360buyimg.com/n0/jfs/t1/118240/27/5634/117364/5eb4ce96E09e88f5e/90b1886cf260b3a9.jpg",
                        description: "台派 狗粮20KG40斤装泰迪金毛萨摩拉布拉多成犬幼犬小型中型大型犬通用型",
                        classification: "狗粮",
                        price: 109.00,
                        orderNumber: 21243243232432324,
                    }*/]

            };
        },
        mounted() {
            this.getOrderMessage()
        },
        methods: {
            /*ConfirmReceipt(orderNumber) {
                console.log(orderNumber)
                var order;
                for (order in this.OrderList) {
                    console.log("ordder"+order.orderNumber)
                    if(order.orderNumber == orderNumber) {
                        console.log("判断")
                        var index = order.indexOf(order)
                        this.OrderList.slice(index,1);
                        order.active++;
                        this.OrderList.slice(index,1,order)
                        break;
                    }
                }
            },*/
            getOrderMessage(){
                console.log("获取订单列表");
                console.log("userId:"+getMyOrder.getCookie("userid"))
                getMyOrder.getViewById(getMyOrder.getCookie("userid")).then(
                    res=>{
                        console.log("res.data:"+res.data)
                        this.OrderList =res.data
                    }
                )

            },
            ConfirmReceipt(order) {
                console.log("确认收货");
                console.log(order);
                console.log( "orderId :"+order.id);
                var index = this.OrderList.indexOf(order);

                //console.log(this.OrderList);
                confirm.getParams({
                    saleDocId :order.id,
                }).then(
                    res=>{
                        console.log(res.data)//随便打印一下，没啥用
                    }
                )
                if(order.active>1){
                    return
                }
                this.$set(this.orderList,order.active++,this.OrderList[index].active);

            },
        }
    }
</script>

<style scoped>
    .Confirm-Receipt-Button{
        width: 100%;
        border: none;
        background: lightgrey;
        color: black;
        height: 29px;
        font-size: 15px;
        font-weight: 600;
    }
.order-picture{
    width: 77px;
}
    .order-price{
        color: #bd2c00;
        font-size: larger;
        font-weight: 600;
    }
</style>